<template>
  <div class="header">
    <div class="header-list">
      <div class="header-top">
        <div class="btn btn--menu" @click="toggleClick">
          <i class="icon"></i>
          <span class="screen-reader-text">Main Menu</span>
          <div class="nav" v-if="isMenu">
            <div class="nav-item">
              <ul class="limenu">
                <li v-for="(v, i) in menuList" :key="i">
                  <router-link :to="v.path" @click.stop="clickMenu">
                    {{ v.title }}
                  </router-link>
                </li>
                <li v-for="(v, i) in moreList" :key="i">
                  <router-link :to="v.path" @click.stop="clickMenu">
                    {{ v.title }}
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="logo">
          <router-link to="/index" class="img" title="Sinopoly Watch"></router-link>
        </div>
        <ul class="header-menu">
          <!-- <li v-for="(v, i) in menuList" :class="{ active: i === selectedIndex }" :key="i" @click="selectMenuItem(i)">
            <router-link :to="v.path" class="bot">
              {{ v.title }}
            </router-link>
          </li> -->
          <router-link :to="v.path" class="bot" v-for="(v, i) in menuList" :key="i">
            <li :class="{ active: i === selectedIndex }" @click="selectMenuItem(i)">{{ v.title }}</li>
          </router-link>
          <li class="isshow" @click="isShow = !isShow" style="line-height:64px;">
            More<el-icon class="icon">
              <CaretBottom />
            </el-icon>
            <div v-if="isShow" class="ul">
              <template v-for="(v, i) in moreList" :key="i">
                <div>
                  <router-link :to="v.path">
                    {{ v.title }}
                  </router-link>
                </div>
              </template>
            </div>
          </li>
        </ul>
        <!-- <div class="top-right">
          <router-link to="" class="tobtn" @mouseenter="hoverEnter" @mouseleave="hoverLeave">Subscribe Now</router-link>
          <div class="fade-out" v-if="isFade">
            <div class="cx-title">Don’t Wait To Invest Like the Best</div>
            <div class="cx-description">
              Get the tools you need to succeed in the market, with real-time
              data, news and analysis from MarketWatch.
            </div>
            <router-link to="" class="tobtn">Subscribe Now</router-link>
          </div>
        </div> -->
        <!-- 图像部分 -->
        <div class="profile logged-in">
          <label class="btn--text btn--profile j-toggle-label" @click="isProfile = !isProfile"
            title="Toggle account settings">
            <span class="screen-reader-text">Account Menu</span>
          </label>
          <ul class="profile__menu j-menu-contents j-toggle--profile" v-if="isProfile">
            <li class="profile__item profile--name divider">{{ userName }}</li>
            <!-- <li class="profile__item">
              <router-link to="">Customer Center</router-link>
            </li>
            <li class="profile__item">
              <router-link to="">Watchlist</router-link>
            </li>
            <li class="profile__item">
              <router-link to="">Newsletters</router-link>
            </li>
            <li class="profile__item">
              <router-link to="">Price Alerts</router-link>
            </li>
            <li class="profile__item divider">
              <router-link to="">Games</router-link>
            </li> -->
            <li class="profile__item" v-if="!token">
              <router-link to="/login" @click.stop="hiddenMenu">Log In</router-link>
            </li>
            <li class="profile__item" v-if="!token">
              <router-link to="/singin" @click.stop="hiddenMenu">Sign Up</router-link>
            </li>
            <li class="profile__item" @click="LogOut" v-if="token">
              <router-link to="/login">Log Out</router-link>
            </li>
          </ul>
        </div>
        <!-- 搜索按钮 -->
        <button class="btn btn--lighten btn--search j-btn-search" @click="isSearch = !isSearch" style="display:none">
          <el-icon class="icon-sear">
            <Search v-if="!isSearch" />
            <CloseBold v-else />
          </el-icon>
        </button>
        <toSearch v-if="isSearch"></toSearch>
      </div>
    </div>
  </div>
</template>
<script setup>
import toSearch from "../../components/toSearch/toSearch.vue";
import { useRouter } from "vue-router";
import { getStorage, removeStorage } from "@/utils";
import { useUserStore } from '@/store/user.js';
const userInfoStore = useUserStore();
import { setConfig } from "@/utils/index";
import loginRequest from "@/api/login.js";
import { useRoute } from "vue-router";
const route = useRoute();
const token = ref('')
token.value = getStorage('spToken')
const userName = ref('ACCOUNT SETTINGS')
userName.value = getStorage('userName')
if (userName.value === null) {
  userName.value = 'ACCOUNT SETTINGS'
}
watch(() => userInfoStore.userInfo.token, (newToken, oldToken) => {
  // 处理 token 变化 
  if (newToken) {
    token.value = getStorage('spToken')
  } else {
    token.value = ''
  }
});
watch(() => userInfoStore.userInfo.username, (newName, oldName) => {
  // 处理 token 变化 
  if (newName) {
    userName.value = getStorage('userName')
  } else {
    userName.value = 'ACCOUNT SETTINGS'
  }
  if (getStorage('userName') === null) {
    userName.value = 'ACCOUNT SETTINGS'
  }
});
watch(() => route.path, (newdata, oldpath) => {
  // 监听路由变化
  selectMenuItem()
});
onMounted(() => {
  getConfig() //获取系统配置
  getMdList() //获取tab
})
const isMenu = ref(false)
const menuList = ref([
  { title: "Latest", path: "/latestNews" },
  { title: "Watchlist", path: "/watchlist" },
  { title: "Markets", path: "/markets" },
  { title: "Investing", path: "/inverting" },
  { title: "Personal Finance", path: "/personalFinance" },
  { title: "Economy", path: "/economyPage" },
  { title: "Retirement", path: "/retireMent" },
]);
const moreList = reactive([
  // { title: "How To Invest", path: "/" },
  { title: "Video Center", path: "/videoCenter" },
  { title: "Sinopoly Watch Picks", path: "/marketPickets" },
]);
const isShow = ref(false); //控制more显示与隐藏
const isFade = ref(false);
const isProfile = ref(false); //控制图像的显示与隐藏
const isSearch = ref(false);
const selectedIndex = ref(-1) //当前跳转路由
// 监听window的点击事件
window.addEventListener("click", (event) => {
  // 如果点击的不是模态框和按钮，则隐藏模态框
  if (
    event.target !== event.currentTarget &&
    !event.target.closest(".isshow")
  ) {
    isShow.value = false;
  }
});
const selectMenuItem = (i) => {
  const path = route.path;
  const index = menuList.value.findIndex(item => item.path === path);
  selectedIndex.value = index !== -1 ? index : -1;
  // selectedIndex.value = i
}
const hiddenMenu = () => {
  isProfile.value = false
}
const toggleClick = () => {
  isMenu.value = !isMenu.value
}
const clickMenu = () => {  //点击跳转后隐藏
  isMenu.value = false
}
const hoverEnter = () => {
  isFade.value = true;
};
const hoverLeave = () => {
  isFade.value = false;
};
const router = useRouter();

const pushSearch = () => {
  isSearch.value = !isSearch.value;
  // 有个Bug需处理 最右边还有一个下拉框 没有隐藏掉
};
// 获取返回每个tab字段的数据 
const getMdList = () => {
  loginRequest.getMdTab({})
    .then((res) => {
      if (res.code === 0) {
        userInfoStore.setMdTab(res.data)
      }
    })
}
// 退出登录
const LogOut = () => {
  isProfile.value = false
  localStorage.removeItem("lang")
  localStorage.removeItem('tabMdData')
  window.sessionStorage.removeItem('titlepfData')
  window.sessionStorage.removeItem('popularData')
  window.sessionStorage.removeItem('titleData')
  localStorage.removeItem('spToken')
  removeStorage('spToken')
  removeStorage('userName')
  userInfoStore.clearToken()
  userInfoStore.clearName()
}
// 获取系统配置
const getConfig = () => {
  loginRequest.getSystem({})
    .then((res) => {
      if (res.code === 0) {
        setConfig('awsPrefix', res.data.awsPrefix)
      }
    })
}
</script>
<style lang="scss" scoped>
.header {
  height: 62px;
  // height: 100%;
  // position: fixed;
}

.header-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 62px;
  background-color: #262626;
  z-index: 999;
}

.header-top {
  height: 62px;
  width: 85%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon {
  vertical-align: middle;
  padding-left: 2px;
}

.logo .img {
  background: url("../../assets/logo.png") no-repeat center center;
  width: 254px;
  height: 60px;
  display: inline-block;
  background-size: contain;
  margin-top: 2px;
}

.header-menu {
  flex: 1;
  display: flex;
  margin-left: 15px;
}

.header-menu li {
  margin: 0 12px;
  font-size: 14px;
  color: white;
  position: relative;
  height: 61px;
}

.header-menu .bot {
  height: 60px;
  line-height: 64px;
  display: inline-block;
}

.header-menu li.active {
  border-bottom: 5px solid #2e6c27;
}

.header-menu li::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 0;
  height: 100%;
  border-bottom: 5px solid #e2e2e2;
  transition: all 0.3s;
}

.header-menu li:hover::before {
  content: "";
  width: 100%;
  left: 0;
}

.isshow {
  position: fixed;
  cursor: pointer;

  // z-index: 1000;
  .ul {
    position: absolute;
    background: #484848;
    padding: 10px 0;
    top: 56px;
    left: -20px;
    display: block;
    z-index: 99;

    div {
      white-space: nowrap;
      color: #fff;
      padding: 10px 20px 10px 15px;
      border-left: 5px solid hsla(0, 0%, 100%, 0.001);
      line-height: 1;
    }

    div:hover {
      border-left: 5px solid #e2e2e2;
    }
  }
}

.tobtn {
  line-height: 30px !important;
  white-space: nowrap;
  font-weight: 700;
  border-radius: 18px;
  color: #202020;
  background-color: #fcb839;
  padding: 0 15px;
  display: inline-block;
  font-size: 12px;
  position: relative;
}

.fade-out {
  position: absolute;
  right: 110px;
  top: 46px;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  width: 300px;
  max-width: 300px;
  color: #202020;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  background: #fff;
  padding: 20px 10px;
  border-top: 5px solid #3677a8;

  .cx-title {
    padding: 0;
    margin-bottom: 15px;
    font: 800 1.28571rem / 1.375 Mulish, sans-serif;
    line-height: 1.2;
    color: #202020;
  }

  .cx-description {
    font-size: 15px;
    margin-bottom: 15px;
    color: #202020;
  }
}

.btn--search {
  position: relative;
  flex: 0 0 50px;
  height: 50px;
  padding: 0;
  color: #fff;
  background: hsla(0, 0%, 100%, 0.1);
}

.icon-sear {
  font-size: 22px;
  padding-top: 24px;
}

.btn--menu {
  background: #306995;
  flex: 0 0 50px;
  height: 100%;
  padding: 0;
  position: relative;
  margin-right: 10px;
}

.nav {
  display: block;
  top: 55px;
  left: 0;

  .nav-item {
    padding: 20px 0;
    background: #306995;
    max-width: 320px;

    .limenu {
      display: block;

      li {
        color: #fff;
        display: block;
        padding: 10px 20px;

        a {
          text-transform: none;
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  .header-menu {
    display: none;
  }
}

@media (max-width: 976px) {
  .top-right {
    display: none;
  }
}
</style>
